<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue事件的修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<a id ="one" href="https://www.baidu.com" @click.prevent="show()">点击不会跳转</a>
</body>
<!--
        事件冒泡:是由当前元素所在的节点向外逐步触发
        事件捕获:是由当前事件触发的所在节点的祖先元素逐步向内触发

       Vue中的事件修饰符:
            1.prevent:阳止默认事件(常用);
            2.stop:阳止事件冒泡(常用);
            3.once:事件只触发一次(常用);
            4.capture:使用事件的插获模式;
            5.self:只有event.target是当前操作的元素时才触发事件;
            6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
-->
<script>
    Vue.config.productionTip = false;

    new Vue({
        /*例1，原本a标签点击后会跳转链接地址，但是现在加上了 prevent:阳止默认事件(常用)*/
        el: '#one',
        methods: {
            show() {
                alert('点击了');
            }
        }
    });
</script>
</html>